<template>
  <a-table :columns="columns" :pagination="pagination" :dataSource="data" @change="onChange"/>
</template>
<script>
  //用于选择
  const columns = [
    {
      title: '编号',
      dataIndex: 'key',
      // specify the condition of filtering result
      // here is that finding the name started with `value`
      //排名顺序等于成绩排名顺序
      sorter: (a, b) => a.length - b.length
    },
    {
      title: '名称',
      dataIndex: 'name',
      filters: [
        {
          text: 'Joe',
          value: 'Joe'
        },
        {
          text: 'Jim',
          value: 'Jim'
        },
        {
          text: 'Submenu',
          value: 'Submenu',
          children: [
            {
              text: 'Green',
              value: 'Green'
            },
            {
              text: 'Black',
              value: 'Black'
            }
          ]
        }
      ],
      // specify the condition of filtering result
      // here is that finding the name started with `value`
      onFilter: (value, record) => record.name.indexOf(value) === 0,
      sorter: (a, b) => a.name.length - b.name.length
    },
    {
      title: '发布日期',
      dataIndex: 'data',
      filters: [{
        text: 'London',
        value: 'London'
      }, {
        text: 'New York',
        value: 'New York'
      }],
      filterMultiple: false,
      onFilter: (value, record) => record.address.indexOf(value) === 0,
      sorter: (a, b) => a.data.length - b.data.length
    },
    {
      title: '长度',
      dataIndex: 'length',
      sorter: (a, b) => a.length - b.length
    },
    {
      title: '重量',
      dataIndex: 'weight',
      sorter: (a, b) => a.weight - b.weight
    },
    {
      title: '体积',
      dataIndex: 'volume',
      sorter: (a, b) => a.length - b.length
    },
    {
      title: '是否接单',
      dataIndex: 'order',
      filters: [
        {
          text: '是',
          value: '是'
        },
        {
          text: '否',
          value: '否'
        },
      ],
      onFilter: (value, record) => record.name.indexOf(value) === 0
    }

  ]

  const data = [
    {
      key: 'No.1',
      name: 'John Brown',
      data: 'New York No. 1 Lake Park',
      length: 53,
      weight:12,
      volume:16,
      order:"是"
    }, {
      key: 'No.2',
      name: 'Jim Green',
      data: 'London No. 1 Lake Park',
      length: 51,
      weight:19,
      volume:15,
      order:"是"
    }, {
      key: 'No.3',
      name: 'Joe Black',
      data: 'Sidney No. 1 Lake Park',
      length: 32,
      weight:12,
      volume:12,
      order:"是"
    }, {
      key: 'No.4',
      name: 'Jim Red',
      data: 'London No. 2 Lake Park',
      length: 23,
      weight:12,
      volume:13,
      order:"是"
    }, {
      key: 'No.5',
      name: 'Jim Red',
      data: 'London No. 2 Lake Park',
      length: 16,
      weight:12,
      volume:17,
      order:"是"
    }, {
      key: 'No.6',
      name: 'Jim Red',
      data: 'London No. 2 Lake Park',
      length: 15,
      weight:52,
      volume:16,
      order:"是"
    },{
      key: 'No.7',
      name: 'Jim Red',
      data: 'London No. 2 Lake Park',
      length: 14,
      weight:62,
      volume:13,
      order:"是"
    },{
      key: 'No.8',
      name: 'Jim Red',
      data: 'London No. 2 Lake Park',
      length: 13,
      weight:72,
      volume:11,
      order:"否"
    },{
      key: 'No.9',
      name: 'Jim Red',
      data: 'London No. 2 Lake Park',
      length: 12,
      weight:16,
      volume:15,
      order:"是"
    },{
      key: 'No.10',
      name: 'Jim Red',
      data: 'London No. 2 Lake Park',
      volume: 9,
      length: 11,
      weight:17,
      order:"否"
    },{
      key: 'No.11',
      name: 'Jim Red',
      data: 'London No. 2 Lake Park',
      length: 10,
      weight:18,
      volume:15,
      order:"是"
    },{
      key: 'No.12',
      name: 'Jim Red',
      data: 'London No. 2 Lake Park',
      length: 9,
      weight:15,
      volume:15,
      order:"是"
    },{
      key: 'No.13',
      name: 'Jim Red',
      data: 'London No. 2 Lake Park',
      length: 8,
      weight:14,
      volume:15,
      order:"是"
    }]

  const pagination={
    defaultPageSize:10,
    hideOnSinglePage:true,
  }

  function onChange(pagination, filters, sorter) {
    console.log('params', pagination, filters, sorter)
  }


  export default {
    name: 'HzHwTable',
    data() {
      return {
        data,
        columns,
        pagination:{
          defaultPageSize:10,
          style:{
            marginRight:'10px',
            marginTop:'12px'
          }
        }
      }
    },
    methods: {
      onChange
    }
  }
</script>